<!-- 巡检总览-缺陷分析 -->
<template>
  <div style="width: 100%; height: 100%" class="pieview">
    <p>{{ title }}</p>
    <div ref="chartDom" style="width: 100%; overflow: hidden"></div>
  </div>
</template>
<script>
import { basePipConf } from '@/config/basePipConf';
import { px } from '@/utils/utils';
const chartOptions = basePipConf;
export default {
  props: ['title'],
  data() {
    return {
      trendData: [],
      chartInstance: null
    };
  },
  mounted() {
    // eslint-disable-next-line no-undef, new-cap
    this.chartInstance = new echarts.init(this.$refs.chartDom);
    const res = {
      code: 200,
      success: true,
      data: [
        {
          level: 'normal',
          levelName: '已完成',
          num: '1226'
        },
        {
          level: 'urgent',
          levelName: '已暂停',
          num: '1047'
        },
        {
          level: 'big',
          levelName: '未评价',
          num: '900'
        }
      ],
      msg: '操作成功'
    };
    this.trendData = res.data || [];
    this.initOptions();
  },
  methods: {
    initOptions() {
      const self = this;
      chartOptions.series[0].data = self.trendData.map(v => ({
        name: v.levelName,
        value: v.num
      }));
      chartOptions.legend.formatter = function(name) {
        console.log('🚀 ~ initOptions ~ name:', name);
        let items = self.trendData.find(item => item.levelName == name);
        const syles = {
          已完成: 'green',
          已暂停: 'red',
          未评价: 'orange'
        };
        const format = syles[name];
        return `${name} {${format}| ${items?.num}} `;
      };
      chartOptions.legend.right = px(20);
      chartOptions.legend.top = 'center';
      chartOptions.legend.width = px(100);
      chartOptions.legend.selectedMode = true;
      // chartOptions.legend.top = '25%';
      chartOptions.legend.itemGap = px(2);
      chartOptions.legend.textStyle.width = px(80);
      chartOptions.legend.textStyle.lineHeight = px(18);
      //   chartOptions.legend.formatter = function (name) {
      //     return name.length > 5 ? `${name.slice(0, 5)}...` : name;
      //   };
      this.chartInstance.setOption(chartOptions);
    }
  }
};
</script>
<style lang="scss" scoped>
.pieview {
  p {
    display: flex;
    align-items: center;
    font-size: px(16);
    height: px(18);
    &::before {
      width: px(9);
      height: px(18);
      display: inline-block;
      content: ' ';
      background: url('~@/assets/image/arrow.png') no-repeat center;
      background-size: cover;
      margin-right: px(8);
    }
  }
  > div {
    height: calc(100% - px(18));
  }
}
</style>
